<!DOCTYPE html>
<html style="height: 100%;margin: 0">
<head>
    <script src="../../Jessibuca/jessibuca.js"></script>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <style>
        body,html{
            overflow: hidden;
        }
        .layui-card-body{padding:0}
        .vbox{display:grid;height:100%;width:100%;margin:0}
        .vbox .vitem{box-sizing:border-box;background-color:#333333;position:relative;border:1px solid rgba(225,225,225,0.21);cursor:pointer;position:relative;color:#fff}
        .vbox .vitem_active{border:1px solid deepskyblue}
        .box_4{grid-template-columns:repeat(2,50%);grid-template-rows:repeat(2,50%)}
        .vitem-v span{position:absolute;top:45%;left:45%}
        .showGreen{cursor:pointer;margin-left:10px}
        .green1,.green4{width:20px;height:20px}
        .green1:hover{content:url("${ctxPath}/admin/images/Green1-2.png")}
        .green4:hover{content:url("${ctxPath} /admin/images/Green4-2.png")}
        ::-webkit-scrollbar{width:6px;height:5px}
        ::-webkit-scrollbar-track{background:white;border-radius:2px}
        ::-webkit-scrollbar-thumb{background:#E6E6E6;border-radius:2px}
        ::-webkit-scrollbar-thumb:hover{background:#E6E6E6}
        ::-webkit-scrollbar-corner{background:#f6f6f6}
        .control-wrapper{position:relative;width:130px;height:130px;border-radius:50%;background-image:url(../../resource/wzgl/yun-yuntai.png);background-size:100% 100%}
        .control-btn{position:absolute;width:38%;height:38%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all .3s linear;background:transparent}
        .control-btn:after{position:absolute;width:60%;height:60%;background:#fff;z-index:2}
        .control-btn:before{position:relative;display:block;width:16px;height:16px;border-top:3px solid #fff;border-right:3px solid #fff;border-radius:0 4px 0 0;box-sizing:border-box;z-index:2;background-size:cover}
        .control-top{top:0%;left:30%;border-radius:0 100% 0 0}
        .control-top:before{transform:translate(30%,-25%)}
        .control-top:after{left:0;bottom:0;border-radius:0 100% 0 0}
        .control-bottom{left:30%;bottom:0%;border-radius:0px 0 100% 0px}
        .control-bottom:before{transform:translate(25%,25%) rotate(90deg)}
        .control-bottom:after{top:0;left:0;border-radius:0 0 100% 0}
        .control-left{top:30%;left:0%;border-radius:0 0 0px 100%}
        .control-left:before{transform:translate(-25%,30%) rotate(180deg)}
        .control-left:after{right:0;top:0;border-radius:0 0 0 100%}
        .control-right{top:30%;right:0%;border-radius:0 100% 0 0}
        .control-right:before{transform:translate(30%,-25%)}
        .control-right:after{left:0;bottom:0;border-radius:0 100% 0 0}
        .control-wrapper .control-btn img{width:30px;height:30px;cursor:pointer}
        .controller-button{height:130px;display:flex;flex-direction:column;justify-content:space-around;margin-left:20px;margin-top:20px}
        .controller-button button{width:25px;height:25px;color:#22CB85;border-radius:5px;font-size:18px;border:none}
        .controller-button .sub{background-image:url(../../resource/wzgl/suoxiao.png);background-size:100% 100%;cursor:pointer}
        .controller-button .add{background-image:url(../../resource/wzgl/fangda.png);background-size:100% 100%;cursor:pointer}
        .controller-button span{font-size:16px;color:#22CB85}
        .controller-button
        .controller-button-box{display:flex;justify-content:space-around}
        #mui-player1{background:rgba(13,14,27,0.7);width:100%;height:100%}
        #mui-player2{background:rgba(13,14,27,0.7);width:100%;height:100%}
        #mui-player3{background:rgba(13,14,27,0.7);width:100%;height:100%}
        #mui-player4{background:rgba(13,14,27,0.7);width:100%;height:100%}
        #mui-player5{background:rgba(13,14,27,0.7);width:100%;height:100%}
        #mui-player6{background:rgba(13,14,27,0.7);width:100%;height:100%}
        #mui-player7{background:rgba(13,14,27,0.7);width:100%;height:100%}
        #mui-player8{background:rgba(13,14,27,0.7);width:100%;height:100%}
        #mui-player9{background:rgba(13,14,27,0.7);width:100%;height:100%}
        .layui-form table thead th{background-color:#DFF2F0 !important;color:#049590 !important;font-weight:bolder}
        .td1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:80px;max-width:80px}
        .td2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:304px;max-width:304px}
        .layui-disabled,.layui-disabled:hover{color:#555 !important;cursor:not-allowed !important}
        .source-flag{position:absolute !important;top:10px !important;left:auto !important;right:15px !important;font-style:normal;display:none;z-index:10}
        .ai-icon{
            position:absolute;bottom:50px;left:auto;right:10px;font-style:normal;display:none;z-index: 10;
        }
        .Ai{
            background: url("${ctxPath}/admin/images/greenAi.png") no-repeat 50%;
            background-size: 100% 100%;
            width: 32px!important;
            height: 32px!important;
        }
        .layui-layer-hui{
            background-color: rgba(0,0,0,0.8)!important;
        }
        .tt{
            font-size: 36px;
            color: #cdcdcd;
        }
        .ff{
            font-size: 36px;
            color: #006865;
        }
        .test::-webkit-scrollbar{
            height: 10px!important;
        }
    </style>
</head>
<body class="pear-container test-body" style="height: 100%;margin: 0">
<div class="layui-row layui-col-space5 layui-form" style="height: 100%;margin: 0">
    <div class="layui-col-xs8 layui-col-md8 layui-col-lg10" style="height: 100%;">
        <div class="layui-row video-1" style="height: 100%;">
            <div class="vbox box_4">
                <div class="vitem">
                    <div id="mui-player1" class="vitem-v" onclick="vclick(this)">
                        <span class="tspan">无信号!</span>
                    </div>
                    <div class="ts source-flag">
                        <span class=""></span>&nbsp;<i onclick="stopPlay(this,true)" title="关闭" style="color: whitesmoke!important;font-size: 28px" class="layui-icon layui-icon-close-fill"></i>
                    </div>
                    <div class="ai-icon" onclick="changeSf(this)" title="切换违章算法">
                        <i class="Ai"></i>
                    </div>
                </div>
                <div class="vitem">
                    <div id="mui-player2" class="vitem-v" onclick="vclick(this)"><span class="tspan">无信号!</span></div>
                    <div class="ts source-flag">
                        <span class=""></span>&nbsp;<i onclick="stopPlay(this,true)" title="关闭" style="color: whitesmoke!important;font-size: 28px" class="layui-icon layui-icon-close-fill"></i>
                    </div>
                    <div class="ai-icon" onclick="changeSf(this)" title="切换违章算法">
                        <i class="Ai"></i>
                    </div>
                </div>
                <div class="vitem">
                    <div id="mui-player3" class="vitem-v" onclick="vclick(this)"><span class="tspan">无信号!</span></div>
                    <div class="ts source-flag">
                        <span class=""></span>&nbsp;<i onclick="stopPlay(this,true)" title="关闭" style="color: whitesmoke!important;font-size: 28px" class="layui-icon layui-icon-close-fill"></i>
                    </div>
                    <div class="ai-icon" onclick="changeSf(this)" title="切换违章算法">
                        <i class="Ai"></i>
                    </div>
                </div>
                <div class="vitem">
                    <div id="mui-player4" class="vitem-v" onclick="vclick(this)"><span class="tspan">无信号!</span></div>
                    <div class="ts source-flag">
                        <span class=""></span>&nbsp;<i onclick="stopPlay(this,true)" title="关闭" style="color: whitesmoke!important;font-size: 28px" class="layui-icon layui-icon-close-fill"></i>
                    </div>
                    <div class="ai-icon" onclick="changeSf(this)" title="切换违章算法">
                        <i class="Ai"></i>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-col-xs4 layui-col-md4 layui-col-lg2" style="height: 100%;">
        <div class="layui-row" style="height: 100%">
            <div class="layui-card-body" style="height: 75%;border: 1px solid #2E2D3C">
                <div style="background-color: #006865; padding: 5px 10px;">
                    <div class="layui-input-inline" style="color: #fff!important;">
                        设备列表
                    </div>
                    <div class="layui-input-inline" style="position: absolute;right: 10px;display: none;">
                        <input type="checkbox" name="close" lay-skin="switch" lay-text="全部|在线">
                    </div>
                </div>
                <div class="layui-field-box test"
                     style="padding: 5px 15px 0 0;color: #333;overflow-y: auto;height: 92%">
                    <div id="tree1" class="layui-tree"></div>
                </div>
            </div>
            <div class="layui-card-body" style="height: 24.4%;border: 1px solid #2E2D3C;" >
                <div style="background-color: #006865; padding: 0 10px;color: #fff!important;">云台控制</div>
                <div class="layui-field-box" style="color: #333">
                    <div  style=" display: flex;justify-content: space-between;align-items: center;">
                        <div class="layui-col-xs6 layui-col-md5 layui-col-lg5" style="background: none;">
                            <div class="control-wrapper">
                                <div class="control-btn control-top"><img src="../../resource/wzgl/yun-top.png" id="top" alt=""></div>
                                <div class="control-btn control-left"><img src="../../resource/wzgl/yun-left.png" id="left" alt=""></div>
                                <div class="control-btn control-bottom"><img src="../../resource/wzgl/yun-botton.png" id="bottom" alt=""></div>
                                <div class="control-btn control-right"><img src="../../resource/wzgl/yun-right.png" id="right" alt=""></div>
                            </div>
                        </div>
                        <div class="layui-col-xs6 layui-col-md7 layui-col-lg7 controller-button" style="background: none;">
                            <div class="controller-button-box" style="text-align: center;">
                                <button class="sub" id="bb_sub"></button>
                                <span>变倍</span>
                                <button class="add" id="bb_add"></button>
                            </div>
                            <div class="controller-button-box" style="text-align: center">
                                <button class="sub" id="bj_sub"></button>
                                <span>变焦</span>
                                <button class="add" id="bj_add"></button>
                            </div>
                            <div class="controller-button-box" style="text-align: center">
                                <button class="sub" id="gq_sub"></button>
                                <span>光圈</span>
                                <button class="add" id="gq_add"></button>
                            </div>
                            <div class="green" style="text-align: right;">
                                <img class="showGreen green1" src="${ctxPath}/admin/images/Green1-1.png" data-count="1"></img>
                                <img class="showGreen green4" src="${ctxPath}/admin/images/Green4-1.png" data-count="4"></img>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    let table = layui.table;
    layui.use(['jquery', 'dtree', 'toast', 'layer'], function () {
        let $ = layui.jquery;
        let tree = layui.tree;
        let toast = layui.toast;
        let layer = layui.layer;
        var lzMap=new Map();
        let maxPond = 20;
        let dqPond=0;

        let MODULE_PATH = "/monitor/";
        let CAMERA_MANAGE_PATH = "${ctxPath}/api/camera/";

        let cur_camera_num = "";
        let sysEvent = false;

        let map = new Map();
        /*let treeData = [{
            title: '雄安新区供电公司',
            id: 9999,
            spread: true,
            disabled: true,
            children: ${tree}
        }];*/
        let treeData1 = ${tree};
        //加载设备树
        tree.render({
            elem: "#tree1",
            data: treeData1,
            showLine: false,
            showCheckbox: true,
            checkChild: false,
            id: 'cameraTree',
            oncheck: function(obj){
                if (!sysEvent){
                    if (obj.checked==false&&!sysEvent){ // 移除时确认
                        console.log(obj.checked,!sysEvent);
                        let msg="取消当前设备智能化安全管控吗？";
                        layer.confirm(msg, {icon: 3, title:'提示',
                            cancel:function (){
                                sysEvent=true;
                                $('#tree1 div[data-id="'+obj.data.id+'"] .layui-form-checkbox').click();
                                sysEvent=false;
                            }
                        }, function(index){
                            layer.close(index);
                            checkCamera(obj,null,true);
                        },function (index){
                            sysEvent=true;
                            $('#tree1 div[data-id="'+obj.data.id+'"] .layui-form-checkbox').click();
                            sysEvent=false;
                            layer.close(index);
                        })
                    }else{
                        $.ajax({
                            url: CAMERA_MANAGE_PATH + "getWatchList",
                            dataType: 'json',
                            type: 'get',
                            success: function (result) {
                                if(result.code == 0){
                                    if(result.data&&result.data!=""){
                                        var camera_online = result.data.camera_array;
                                        if(camera_online&&camera_online.length>0){
                                            dqPond=camera_online.length;
                                        }
                                    }
                                }
                                console.log("当前监控池数量：",dqPond);
                                if (dqPond<maxPond){
                                    checkCamera(obj,null,true);
                                }else{
                                    showControl(obj);
                                }
                            }
                        });
                    }
                }
            },
            click: function(obj){
                /*var aa = $(".vitem_active").children();
                playVideo(aa,'http://flv.bdplay.nodemedia.cn/live/bbb.flv','test');
                return;*/
                $.ajax({
                    url: CAMERA_MANAGE_PATH + "getWatchList",
                    dataType: 'json',
                    type: 'get',
                    success: function (result) {
                        if(result.code == 0){
                            if(result.data&&result.data!=""){
                                var camera_online = result.data.camera_array;
                                if(camera_online&&camera_online.length>0){
                                    dqPond=camera_online.length;
                                }
                            }
                        }
                        if (maxPond<=dqPond){
                            showControl(obj);
                            return;
                        }
                    }
                });
                let title = obj.data.title;
                let cameraCode = obj.data.camera_num;
                let cameraId = obj.data.id;
                var sbCode=null;
                let isDuplicate = false;
                $(".vitem").each(function(){
                    sbCode=$(this).attr("camera_num");
                    if (sbCode==cameraCode){
                        toast.warning({title: "系统消息", message: "播放窗口已存在当前装置！", position: 'topRight'});
                        isDuplicate = true;
                    }
                });
                if(isDuplicate)
                    return;
                var active_win = $(".vitem_active").children();
                if (!active_win || active_win.length == 0) {
                    toast.info({title: '操作提示', message: '请选择要操作的窗口', position: 'topRight'});
                    return;
                }
                $.when(isOnline(cameraCode)).done(function (data) {
                    let status = data;
                    if(status==1){ // 已在监控列表
                        subscribe(active_win, title, cameraCode, 0);
                    }else if(status==0){ // 尚未在监测列表
                        /*
                        let msg="当前设备尚未启用智能化安全管控……<br>[确定] 启用智能监控<br>[取消] 查看原始视频";
                        layer.confirm(msg, {icon: 3, title:'提示'}, function(index){
                            $(".vitem_active .tspan").css("display","none");
                            layer.close(index);
                            let added = addControl(cameraCode, cameraId); // 申请加入智能识别
                            if(added==1){
                                let times = 0, maxRetry = 15;
                                let retry = setInterval(function(){ // 定时重试机制
                                    $.when(isOnline(cameraCode)).done(function (data) {
                                        let status = data; // 检测是否已加入智能识别
                                        if(status==1) { // 已成功加入智能识别
                                            window.clearInterval(retry);
                                            setTimeout(function () {
                                                subscribe(active_win, title, cameraCode, 0); // 订阅视频
                                            }, 3000);
                                        }else{ // 尚未成功加入智能识别
                                            times++;
                                            if(times>maxRetry){// 超出最大重试次数
                                                toast.error({title: "系统消息", message: "订阅视频失败，请稍后再试", position: 'topRight'});
                                                window.clearInterval(retry);
                                            }
                                        }
                                    })
                                } , 2000);
                            }else if(added==0){
                                toast.error({title: "系统消息", message: "添加智能管控失败，请检查装置编号", position: 'topRight'});
                            }else{
                                toast.error({title: "系统消息", message: "行为识别接口服务无法访问", position: 'topRight'});
                            }
                        },function (index){
                            $(".vitem_active .tspan").css("display","none");
                            layer.close(index);
                            subscribe(active_win, title, cameraCode, 1);
                        });
                         */
                        // 取消确认对话框
                        $(".vitem_active .tspan").css("display","none");
                        let added = addControl(cameraCode, cameraId); // 申请加入智能识别
                        console.info(added);
                        if(added==1){
                            let times = 0, maxRetry = 15;
                            let retry = setInterval(function(){ // 定时重试机制
                                $.when(isOnline(cameraCode)).done(function (data) {
                                    let status = data; // 检测是否已加入智能识别
                                    if(status==1) { // 已成功加入智能识别
                                        window.clearInterval(retry);
                                        setTimeout(function () {
                                            subscribe(active_win, title, cameraCode, 0); // 订阅视频
                                        }, 3000);
                                    }else{ // 尚未成功加入智能识别
                                        times++;
                                        if(times>maxRetry){// 超出最大重试次数
                                            toast.error({title: "系统消息", message: "订阅视频失败，请稍后再试", position: 'topRight'});
                                            window.clearInterval(retry);
                                        }
                                    }
                                })
                            } , 2000);
                        }else if(added==0){
                            toast.error({title: "系统消息", message: "添加智能管控失败，请检查装置编号", position: 'topRight'});
                        }else{
                            toast.error({title: "系统消息", message: "行为识别接口服务无法访问", position: 'topRight'});
                        }
                    }else{ // 访问行为识别平台失败
                        // toast.error({title: "系统消息", message: "行为识别接口服务无法访问", position: 'topRight'});
                        let msg="行为识别接口服务无法访问，播放原始视频？";
                        layer.confirm(msg, {icon: 3, title:'提示'}, function(index){
                            layer.close(index);
                            subscribe(active_win, title, cameraCode, 1);
                        },function (index){
                            layer.close(index);
                        })
                    }
                })
            }
        });

        function checkCamera(obj,type,flag){
            let loading = layer.load();
            if(!sysEvent){
                let add="", remove="";
                if (flag){
                    if(obj.checked){ // 增加
                        add=obj.data.camera_num;
                    }else{
                        remove=obj.data.camera_num;
                    }
                }else{
                    if (type==1){
                        add=obj;
                    }else{
                        remove=obj;
                    }

                }
                $.ajax({
                    url: CAMERA_MANAGE_PATH + "watchControl",
                    dataType: 'json',
                    data: {
                        add: add,
                        remove: remove,
                        sfId: ""
                    },
                    type: 'get',
                    success: function (result) {
                        if(result&&result.code==0){
                            if((obj.checked&&result.data.ADDED_CAMERA.length>0)||(!obj.checked&&result.data.REMOVED_CAMERA.length>0)){
                                layer.close(loading);
                                if (!flag){
                                    sysEvent=true;
                                    $('#tree1 div[data-id="'+obj.data.id+'"] .layui-form-checkbox').click();
                                    sysEvent=false;
                                    reloadShowForm();
                                }
                                toast.success({title: "系统消息", message: result.message, position: 'topRight'});
                                if(result.data.REMOVED_CAMERA.length>0){ // 当移除智能监控时自动关闭相应的视频画面
                                    for(let cameraCode of result.data.REMOVED_CAMERA){
                                        let objs = $(".vitem-v");
                                        for(let obj of objs){
                                            if($(obj).parent().attr("camera_num")&&$(obj).parent().attr("camera_num")==cameraCode){
                                                stopPlay($(obj).context.id,false);
                                            }
                                        }
                                    }
                                }
                            }else{
                                sysEvent=true;
                                layer.close(loading);
                                $('#tree1 div[data-id="'+obj.data.id+'"] .layui-form-checkbox').click();
                                toast.error({title: "系统消息", message: "操作失败", position: 'topRight'});
                                sysEvent=false;
                            }
                        }else{
                            sysEvent=true;
                            layer.close(loading);
                            $('#tree1 div[data-id="'+obj.data.id+'"] .layui-form-checkbox').click();
                            toast.error({title: "系统消息", message: result.message, position: 'topRight'});
                            sysEvent=false;
                        }
                    }
                });
            }else{
                layer.close(loading);
                sysEvent=false;
            }
        }

        function isOnline(cameraCode) {
            let online = $.Deferred();
            $.ajax({
                url: CAMERA_MANAGE_PATH + "getWatchList",
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    let online_temp = 0;
                    if (result.code == 0) {
                        if (result.data) {
                            let camera_online = result.data.ONLINE_CAMERA;
                            if (camera_online && camera_online.length > 0 && camera_online.indexOf(cameraCode)!=-1) {
                                online_temp = 1;
                            }else{
                                online_temp = 0;
                            }
                        }
                    }else{
                        online_temp = -1;
                    }
                    online.resolve(online_temp);
                }
            });
            return online;
        }

        function addControl(cameraCode, cameraId){
            let added = 0;
            $.ajax({
                url: CAMERA_MANAGE_PATH + "watchControl",
                dataType: 'json',
                async: false,
                data: {
                    add: cameraCode,
                    remove: "",
                    sfId: ""
                },
                type: 'get',
                success: function (result) {
                    if(result&&result.code==0) {
                        if (result.data.ADDED_CAMERA.length > 0) {
                            sysEvent=true;
                            $('#tree1 div[data-id="'+cameraId+'"] .layui-form-checkbox').click();
                            added = 1;
                            sysEvent=false;
                        }else{
                            added = 0;
                        }
                    }else{
                        added = -1;
                    }
                }
            });
            return added;
        }
        window.removeControl= function (obj,type,flag){
            checkCamera(obj,type,flag);
        }
        function subscribe(active_win, title, cameraCode, isOriginal){
            if(!isOriginal)
                isOriginal=0;
            $.ajax({
                url: CAMERA_MANAGE_PATH + "subscribe?cameraCode=" + cameraCode+"&isOriginal="+isOriginal,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if(result&&result.code==0){
                        active_win.parent().attr("camera_num", cameraCode);
                        cur_camera_num = cameraCode;
                        if (result && result.code == 0) {
                            playVideo(active_win, result.data,"fps");
                        }
                    }
                }
            });
        }

        function playVideo(active_win, videoPath,title){
            console.log(videoPath);
            var ss='' + $(".vitem_active").children().get(0).id;
            var container=document.getElementById(ss);
            var player=map.get(ss);
            if (player!=null){
                player.play(videoPath);
            }else{
                initJessibuca(ss,container,videoPath,title);
            }
        }

        function initJessibuca(ss,container,videoPath,title){
            var jessibuca = new Jessibuca({
                container: container,
                videoBuffer: 0.2, // 缓存时长
                isResize: true,
                decoder: '${ctxPath}/Jessibuca/decoder.js',
                text: title,
                loadingText: "加载中...",
                timeout: 3,
                loadingTimeout: 3,
                useWCS: true,
                debug: false,
                showBandwidth: false, // 显示网速
                operateBtns: {
                    fullscreen: true,
                    screenshot: true,
                    play: true,
                    audio: true,
                    record: true
                },
                forceNoOffscreen: true,
                isNotMute: false,
            },);
            jessibuca.on("recordStart",function(){console.log(ss,"录制 start")});
            jessibuca.on("recordEnd",function(){console.log(ss,"录制 end")});
            jessibuca.onPause = () => console.log('onPause');
            jessibuca.on("error",function (error){
                console.log("error：",error);
            });
            //jessibuca.on("timeout",function(error){console.log('timeout:');setTimeout(jessibuca.play(),3000)})
            jessibuca.on("loadingTimeout",function(){
                console.log('loadingTimeout');
                setTimeout(function (){
                    jessibuca.play();
                },3000);
            });
            jessibuca.on("delayTimeout",function(){
                console.log('delayTimeout');
                setTimeout(function (){
                    jessibuca.play();
                },3000);
            });
            jessibuca.on("load",function(){
                jessibuca.play(videoPath);
                var ss='#' + $(".vitem_active").children().get(0).id;
                $(ss).next().css('display','block');
                $(ss).next().next().css('display','flex');
                $(ss).parent().next().children("div").eq(0).click();
            });

            jessibuca.on("videoInfo",function(data){
                $('#'+ss).next().find('span').attr('data-fbl',data.width+'x'+data.height);
            });
            jessibuca.on("kBps",function(data){
                $('#'+ss).next().find('span').attr('data-ws',data);
            })

            jessibuca.on("stats",function(s){
                var fbl =$('#'+ss).next().find('span').attr('data-fbl');
                var ws =$('#'+ss).next().find('span').attr('data-ws');
                $(container).find(".jessibuca-controls-left").html(fbl+' \@ '+s.fps+'fps '+ws+'KB/S');
            })

            map.set(ss,jessibuca);
        }
        var lzFlag=0;
        window.qhsf=function (obj){

            if ($(obj).hasClass("tt")){
                $(obj).removeClass("tt");
                $(obj).addClass("ff");
            }else{
                $(obj).removeClass("ff");
                $(obj).addClass("tt");
            }
        }

        window.changeSf=function (obj){
            /*$.ajax({
                url: "${ctxPath}/event/data/loadCameraAlgorithm?cameraNum="+1001,
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    console.info(result);
                }
            });

            var html='<div style="height: 300px;width: 500px" class="zdysf"><div class="layui-row" style="margin-top: 10px">\n' +
                '    <div class="layui-col-xs3" style="padding: 10px 0">\n' +
                '      <div class="grid-demo"><span class="iconfont icon-toukui tt" onclick="qhsf(this)"></span></div>\n' +
                '    </div>\n' +
                '    <div class="layui-col-xs3" style="padding: 10px 0">\n' +
                '      <div class="grid-demo"><span class="iconfont icon-shoutao tt" onclick="qhsf(this)"></span></div>\n' +
                '    </div>\n' +
                '    <div class="layui-col-xs3" style="padding: 10px 0">\n' +
                '      <div class="grid-demo"><span class="iconfont icon-yangan tt" onclick="qhsf(this)"></span></div>\n' +
                '    </div>\n' +
                '    <div class="layui-col-xs3" style="padding: 10px 0">\n' +
                '      <div class="grid-demo"><span class="iconfont icon-ren-shuaidao tt" onclick="qhsf(this)"></span></div>\n' +
                '    </div>\n' +
                '    <div class="layui-col-xs3" style="padding: 10px 0">\n' +
                '      <div class="grid-demo"><span class="iconfont icon-gongzuopai tt" onclick="qhsf(this)"></span></div>\n' +
                '    </div>\n' +
                '  </div></div>';
            layer.msg(html, {
                time: 120000, //20s后自动关闭
                btn: ['确定'],
                yes: function(index,layero){
                    console.log(1111111);
                }
            });*/
            //var cameraNum=obj.parent();
            var cameraNum=$(obj).parent().attr("camera_num");
            console.log(cameraNum)
            layer.open({
                type: 2,
                title: "违章识别-算法切换",
                shade: 0.1,
                area: ['600px', '500px'],
                content: "${ctxPath}/event/view/loadsf?cameraNum=" + cameraNum,
            });
        }

        window.stopPlay=function (obj,flag){
            if (flag){
                layer.confirm('确定停止本窗口播放？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    var key=$(obj).parent("div").prev().attr("id");
                    var player=map.get(key);
                    if (player!=null){
                        player.destroy();
                    }
                    map.delete(key);
                    $('#'+key).html('<span className="tspan">无信号!</span>');
                    $('#'+key).next().find('span').html('');
                    $('#'+key).find('span').css('display','block');
                    $('#'+key).next().css('display','none');
                    $('#'+key).next().next().css('display','none');
                    $('#'+key).parent().removeAttr("camera_num");
                    layer.close(index);
                }, function (idx) {
                    layer.close(idx);
                });
            }else{
                var key=obj;
                var player=map.get(key);
                if (player!=null){
                    player.destroy();
                }
                map.delete(key);
                $('#'+key).html('<span className="tspan">无信号!</span>');
                $('#'+key).next().find('span').html('');
                $('#'+key).find('span').css('display','block');
                $('#'+key).next().css('display','none');
                $('#'+key).parent().removeAttr("camera_num");
                $("#mui-player1").click();
            }
        }

        $(".showGreen").click(function () {
            var player=null;
            for (var i in map){
                player=map.get(i);
                if (player!=null){
                    player.destroy();
                }
            }
            map=new Map();
            $(".vbox").attr("class", "vbox");
            var cc = $(this).attr("data-count");
            $(".vbox").addClass("box_" + cc);
            var html = '';
            for (var i = 1; i <= cc; i++) {
                html += '<div class="vitem"><div id="mui-player' + i + '" class="vitem-v" onclick="vclick(this)"><span class="tspan">无信号!</span></div> <div class="ts source-flag" style="display: none">\n' +
                    '                        <span class=""></span>&nbsp;<i onclick="stopPlay(this,true)" title="关闭" style="color: whitesmoke!important;font-size: 28px" class="layui-icon layui-icon-close-fill"></i>\n' +
                    '                    </div><div class="ai-icon" onclick="changeSf(this)" title="切换违章算法">\n' +
                    '                        <i class="Ai"></i>\n' +
                    '                    </div></div>'
            }
            $(".vbox").html(html);
            cur_camera_num = ($("#mui-player1").parent().attr("camera_num"))||"";
            $("#mui-player1").click();
        })

        $("body").delegate(".vitem-v", "click", function () {
            cur_camera_num = ($(this).parent().attr("camera_num"))||"";
            $(".vitem-v").parent().removeClass("vitem_active");
            $(this).parent().addClass("vitem_active");
        })

        $("body").delegate(".vitem", "click", function () {
            cur_camera_num = ($(this).attr("camera_num"))||"";
            $(".vitem").removeClass("vitem_active");
            $(this).addClass("vitem_active");
        });

        window.vclick=function (obj){
            cur_camera_num = ($(obj).parent().attr("camera_num"))||"";
            $(".vitem").removeClass("vitem_active");
            $(obj).parent().addClass("vitem_active");
        };

        let btns = [
            {objid: "top", eventCode: "1026", stopCode: "1025"},
            {objid: "bottom", eventCode: "1028", stopCode: "1027"},
            {objid: "left", eventCode: "1284", stopCode: "1283"},
            {objid: "right", eventCode: "1282", stopCode: "1281"},
            {objid: "bb_sub", eventCode: "770", stopCode: "769"},
            {objid: "bb_add", eventCode: "772", stopCode: "771"},
            {objid: "bj_sub", eventCode: "514", stopCode: "513"},
            {objid: "bj_add", eventCode: "516", stopCode: "515"},
            {objid: "gq_sub", eventCode: "258", stopCode: "257"},
            {objid: "gq_add", eventCode: "259", stopCode: "260"}];

        for(var i in btns){
            initBtnlongPressEvent(btns[i]);
        }

        function initBtnlongPressEvent(btn){
            let timeout;
            let startTime = 0;
            let endTime = 0;
            $("#"+btn.objid).mousedown(function() {
                startTime = new Date().getTime();
                timeout= setTimeout(function() {
                    console.info("发送动作");
                    ptzControl(btn.eventCode, null);
                }, 400);//鼠标按下0.4秒后触发长按事件
            });
            $("#"+btn.objid).mouseup(function() {
                endTime = new Date().getTime();
                clearTimeout(timeout);//清理掉定时器
                if ((endTime - startTime) < 400) {
                    ptzControl(btn.eventCode, btn.stopCode);
                }else{
                    ptzControl(null, btn.stopCode);
                }
            });
        }

        function ptzControl(eventCode, stopCode){
            if(cur_camera_num==""){
                toast.info({title: "操作提示", message: "请先选择要操作的设备", position: "topRight"});
                return;
            }
            $.ajax({
                url: "${ctxPath}/api/camera/control",
                dataType: 'json',
                type: 'get',
                data: {
                    cameraid: cur_camera_num,
                    eventCode: eventCode,
                    stopCode: stopCode,
                    rspeed: 5,
                    cspeed: 5
                },
                success: function (result) {
                    console.info(result);
                }
            });
        }


        function showControl(obj){
            var html='';
            html +='<form class="layui-form" id="showForm">\n' +
                '    <div class="main-container">\n' +
                '        <div class="layui-card">\n' +
                '            <div class="layui-row"><span style="float: left">已接入视频设备信息</span><span style="float: right;color: red">最大支持视频路数：'+maxPond+'</span></div>\n' +
                '            <table lay-filter="demo" class="layui-table" lay-skin="line" cellpadding="0" border="0" cellspacing="0">\n' +
                '                <thead>\n' +
                '                <tr>\n' +
                '                    <th class="layui-table-col-special" width="60">设备编号</th>\n' +
                '                    <th class="layui-table-col-special" width="80">设备名称</th>\n' +
                '                    <th class="layui-table-col-special">作业内容</th>\n' +
                '                    <th class="layui-table-col-special" width="60">操作</th>\n' +
                '                </tr>\n' +
                '                </thead>\n' +
                '                <tbody id="jkcData">\n';
            $.ajax({
                url: CAMERA_MANAGE_PATH + "getWatchList",
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if(result.code == 0){
                        if(result.data&&result.data!=""){
                            let camera_online = result.data.camera_array;
                            if(camera_online&&camera_online.length>0){
                                for (var i=0;i<camera_online.length;i++){
                                    html +=                '                <tr>\n' +
                                        '                    <td>'+camera_online[i]+'</td>\n' +
                                        '                    <td class="td1">'+result.data.cameraName[i]+'</td>\n' +
                                        '                    <td class="td2">'+result.data.job[i]+'</td>\n' +
                                        '                    <td><a href="javascript:;" onclick="removeControl('+camera_online[i]+',0,false)">移除</a></td>\n' +
                                        '                </tr>\n';
                                }
                                dqPond=camera_online.length;
                                sysEvent=true;
                                tree.setChecked('cameraTree', camera_online);
                                sysEvent=false;
                                html +=                '                </tbody>\n' +
                                    '            </table>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</form>';
                                layer.open({
                                    type: 1,
                                    btn: ['添加', '取消']
                                    , btn1: function (index) {
                                        if (dqPond<maxPond){
                                            checkCamera(obj.data.camera_num,1,false)
                                        }else{
                                            layer.msg("监控池设备数据已达上限！", {icon: 6, time: 1000});
                                        }
                                    }
                                    , btn2: function (index) {
                                        sysEvent=true;
                                        $('#tree1 div[data-id="'+obj.data.id+'"] .layui-form-checkbox').click();
                                        sysEvent=false;
                                    },
                                    area: ['800px', '450px'],
                                    shadeClose: false,
                                    scrollbar: false,
                                    closeBtn: 0,
                                    title: "监控池",
                                    content: html
                                })
                            }
                        }

                    }
                }
            });
        }

        function reloadShowForm(){
            var html='';
            $.ajax({
                url: CAMERA_MANAGE_PATH + "getWatchList",
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if(result.code == 0){
                        if(result.data&&result.data!=""){
                            let camera_online = result.data.camera_array;
                            if(camera_online&&camera_online.length>0){
                                for (var i=0;i<camera_online.length;i++){
                                    html +=                '                <tr>\n' +
                                        '                    <td>'+camera_online[i]+'</td>\n' +
                                        '                    <td class="td1">'+result.data.cameraName[i]+'</td>\n' +
                                        '                    <td class="td2">'+result.data.job[i]+'</td>\n' +
                                        '                    <td><a href="javascript:;" onclick="removeControl('+camera_online[i]+',0,false)">移除</a></td>\n' +
                                        '                </tr>\n';
                                }
                            }
                            dqPond=camera_online.length;
                            sysEvent=true;
                            tree.setChecked('cameraTree', camera_online);
                            sysEvent=false;
                        }
                    }
                    $("#jkcData").html(html);
                }
            });
        }

        layer.ready(function(){
            console.log("初始化监控池设备");
            $("#mui-player1").click();
            // 初始化已加入智能监控的设备信息
            $.ajax({
                url: CAMERA_MANAGE_PATH + "getWatchList",
                dataType: 'json',
                type: 'get',
                success: function (result) {
                    if(result.code == 0){
                        if(result.data&&result.data!=""){
                            var camera_online = result.data.camera_array;
                            if(camera_online&&camera_online.length>0){
                                dqPond=camera_online.length;
                                sysEvent=true;
                                tree.setChecked('cameraTree', camera_online);
                                sysEvent=false;
                            }
                        }
                    }
                }
            });
        });
    });
</script>
</html>